<template>
  <div class="main-box">
    <ex-search-table
      :columns="columns"
      :data="data"
      :total="total"
      :current-page="query.page"
      :page-size="query.pageSize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    >
    </ex-search-table>
  </div>
</template>

<script setup lang="jsx">
  import ExSearchTable from '@/components/ExSearchTable/index.vue'
  import { ref, reactive } from 'vue'
  import { useTable } from '@/hooks/useTable'
  import { getApiList } from '@/api/api'

  const query = reactive({
    page: 1,
    pageSize: 10
  })

  const columns = ref([
    {
      label: 'API路径',
      prop: 'path',
      render: (row) => {
        return <span>{row.path}</span>
      }
    },
    {
      label: 'API简介',
      prop: 'description',
      render: (row) => {
        return <span>{row.description}</span>
      }
    }
  ])

  const {
    data,
    total,
    selectItems,
    getListAsync,
    deleteListAsync,
    search,
    reset,
    handleSortChange,
    handleCurrentChange,
    handleSizeChange,
    handleSelectionChange,
    handleClearSelection
  } = useTable({
    query,
    queryApi: getApiList
  })
</script>

<style lang="scss" scoped>
  .main-box {
    padding: 20px;
    background: linear-gradient(308deg, #f8fbff 0%, #f2f7ff 100%);
    box-shadow: 4px 7px 16px 0px rgba(209, 224, 250, 0.23),
      inset 0px 0px 15px 0px #ffffff;
    border-radius: 18px 18px 18px 18px;
    border: 1px solid #ffffff;
  }
</style>
